I like this. One thing though is the bottom project icon for templates will shift when the upper icon is hovered over, which is small but wonky.

I'm trying to add a fix to handle the padding so it doesn't shift on hover, video below to show this:
Screencast from 09-21-2023 09:40:31 AM.webm

Yea I noticed that too. I can look into it.

I think this will do the trick. I need to clean it up some, but I'm having to do full rebuilds right now for some reason to get changes making this burdensome to test. Hoping tmro that has somehow resolved. But, here's what finally got things working:

.project-icon {
  position: relative; 
  padding: 0.3rem;
  margin: 0.5rem;
  border: 0.25em solid rgb(26, 118, 211);
  border-radius: 10%;

  &:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0.15em solid rgb(26, 118, 211); 
    border-radius: inherit;
    pointer-events: none;
  }

  a {
    text-decoration: none;
  }

  button {
    text-decoration: none !important;
  }
}

And even with that i can see a little white showing up in the thickened border that needs smoothed out so it's not perfect. But, the elements all stay where they should be.

I found we can use outline instead of border. PTAL, I think that's what we're looking for.

https://developer.mozilla.org/en-US/docs/Web/CSS/outline#description